
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>请求统计</title>
    <base href="/waf/">
    <link rel="stylesheet" href="css/element-ui.css">
    <script src="js/vue.js"></script>
    <script src="js/element-ui.js"></script>
    <style type="text/css">
        .el-table__header tr,
        .el-table__header th {
            padding: 0;
            height: 35px;
        }
        .el-table__body tr,
        .el-table__body td {
            padding: 0;
            height: 35px;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div id="app" style="margin: 1em; padding: 0;">
<template>

    <el-tabs v-model="g.log_type" @tab-click="_load">
        <el-tab-pane label="URL 统计" name="url"></el-tab-pane>
        <el-tab-pane label="IP 统计"  name="ip" ></el-tab-pane>
    </el-tabs>

    <el-table :data="$rows" stripe style="width: 100%" height="550">

        <el-table-column :label=" g.log_type=='ip' && '客户端IP' || '访问路径'" min-width="300">
            <template slot-scope="scope">

                <span style="margin-right: 10px">{{ scope.row.url }}</span>

                <a v-if="g.log_type=='ip'" target="_blank"
                   :href="'https://ip.hao86.com/' + scope.row.url + '/'">
                   <i class="el-icon-position"></i>
               </a>
                <a v-else target="_blank" :href="scope.row.url">
                   <i class="el-icon-link"></i>
               </a>

            </template>
        </el-table-column>

        <el-table-column prop="count"   label="请求数"  min-width="75" align="right"></el-table-column>
        <el-table-column prop="success" label="成功率"  min-width="75" align="right"></el-table-column>
        <el-table-column prop="1xx"     label="1xx"     min-width="75" align="right"></el-table-column>
        <el-table-column prop="2xx"     label="2xx"     min-width="75" align="right"></el-table-column>
        <el-table-column prop="3xx"     label="3xx"     min-width="75" align="right"></el-table-column>
        <el-table-column prop="4xx"     label="4xx"     min-width="75" align="right"></el-table-column>
        <el-table-column prop="5xx"     label="5xx"     min-width="75" align="right"></el-table-column>
        <el-table-column prop="reads"   label="上传流量" min-width="85" align="right"></el-table-column>
        <el-table-column prop="writes"  label="下载流量" min-width="85" align="right"></el-table-column>
        <el-table-column prop="time"    label="平均耗时" min-width="85" align="right"></el-table-column>
    </el-table>

    <div style="margin-top: 1em;">
        <el-pagination style="float: left;"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="g.page_total"
            :page-size.sync="g.page_size"
            :current-page.sync="g.page_index" >
        </el-pagination>
        <el-button @click="_load" style="margin-left: 2em;"
            type="primary" size="small" icon="el-icon-search">刷新</el-button>
    </div>

</template>
</div> <!-- app -->
</body>
</html>

<script>

    var log_type = `{{ log_type }}`;
    var my_head  = `{{ my_head }}`;

</script>

<script src="js/summary.js"></script>
